
<template>
  <div class="charge-telephone-page common-page">
    <van-field
      v-model="account"
      type="tel"
      maxlength="11"
      label="充值手机号"
      placeholder="请输入充值账号"
      clearable
    />
    <van-tabs v-model="activeName">
      <!-- <van-tab
        title="话费充值"
        name="a"
      >
        <van-tabs
          v-model="activeName2"
          class="small-tab"
        >
          <van-tab
            title="移动"
            name="a"
          >
            <charge-telephone-tab-item></charge-telephone-tab-item>
          </van-tab>
          <van-tab
            title="联通"
            name="b"
          >
            <charge-telephone-tab-item></charge-telephone-tab-item>
          </van-tab>
          <van-tab
            title="电信"
            name="c"
          >
            <charge-telephone-tab-item></charge-telephone-tab-item>
          </van-tab>
        </van-tabs>
      </van-tab>
      <van-tab
        title="话费慢充"
        name="b"
      >
        <van-tabs
          v-model="activeName2"
          class="small-tab"
        >
          <van-tab
            title="移动"
            name="a"
          >
            <charge-telephone-tab-item></charge-telephone-tab-item>
          </van-tab>
          <van-tab
            title="联通"
            name="b"
          >
            <charge-telephone-tab-item></charge-telephone-tab-item>
          </van-tab>
          <van-tab
            title="电信"
            name="c"
          >
            <charge-telephone-tab-item></charge-telephone-tab-item>
          </van-tab>
        </van-tabs>
      </van-tab> -->
      <van-tab
        :title="item.label"
        :name="item.name"
        v-for="(item,index) in tabList"
        :key="index"
      >
        <van-tabs
          v-model="activeName2"
          class="small-tab"
        >
          <van-tab
            :title="tabItem.label"
            :name="tabItem.name"
            v-for="(tabItem,tabIndex) in item.list"
            :key="tabIndex"
          >
            <div class="money-box">
              <div class="money-box-item">
                <span>10元</span>
                <span>售价9.9元</span>
              </div>
              <div class="money-box-item">
                <span>10元</span>
                <span>售价9.9元</span>
              </div>
              <div class="money-box-item">
                <span>10元</span>
                <span>售价9.9元</span>
              </div>
              <div class="money-box-item">
                <span>10元</span>
                <span>售价9.9元</span>
              </div>
              <div class="money-box-item">
                <span>10元</span>
                <span>售价9.9元</span>
              </div>
            </div>
            <div class="btn-box">
              <van-button
                type="primary"
                round
              >立即充值</van-button>
            </div>
            <div class="remark-box">
              <span>充值须知</span>
              <span>仅支持当前手机号所在地区及运营商享受该优惠。充值后最慢48小时返回充值结果，请耐心等待。</span>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";
import Share from "./mixin/share";
export default {
  name: "ChargeTelephone",
  mixins: [Share],
  data() {
    return {
      activeName: "a",
      activeName2: "a",
      account: "",
      tabList: [
        {
          name: "a",
          label: "话费充值",
          list: [
            {
              name: "a",
              label: "移动",
            },
            {
              name: "b",
              label: "联通",
            },
            {
              name: "c",
              label: "电信",
            },
          ],
        },
        {
          name: "b",
          label: "话费慢充",
          list: [
            {
              name: "a",
              label: "移动",
            },
            {
              name: "b",
              label: "联通",
            },
            {
              name: "c",
              label: "电信",
            },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.charge-telephone-page {
  background: #ffffff;
  .van-cell.van-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 42px;
    .van-field__label {
      margin-bottom: 43px;
    }
  }
  .van-tabs--line {
    box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.05);
    border-radius: 13px;
    padding-bottom: 71px;
    ::v-deep .van-tabs__wrap {
      height: 100px;
    }
    ::v-deep .van-tabs__nav--line {
      background: #edf9ff;
      height: 100px;
      padding-bottom: 0;
      box-sizing: border-box;
      .van-tab {
        width: 167px;
        height: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
      }
      .van-tab.van-tab--active {
        background: #ffffff;
        font-weight: bold;
      }
      .van-tabs__line {
        bottom: 17px;
        width: 33px;
        height: 8px;
        background: #39bbfe;
        border-radius: 4px;
      }
    }
  }
  .small-tab.van-tabs--line {
    box-shadow: none;
    border: none;
    padding-bottom: 0;
    ::v-deep .van-tabs__wrap {
      height: 100px;
    }
    ::v-deep .van-tabs__nav--line {
      background: none;
      height: 100px;
      padding-bottom: 0;
      box-sizing: border-box;
      .van-tab {
        width: auto;
        height: 100%;
        padding: 0 25px;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        color: #7d7d7d;
      }
      .van-tab.van-tab--active {
        font-weight: bold;
        color: #000000;
      }

      .van-tabs__line {
        display: none;
      }
    }
    .van-tab__pane {
      width: 100%;
      padding: 0 0 0 25px;
      box-sizing: border-box;
    }
    .money-box {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: flex-start;
      width: 100%;
      .money-box-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 147px;
        border: 2px solid #e5e5e5;
        border-radius: 10px;
        margin-bottom: 21px;
        margin-right: 2.7%;
        span:first-child {
          font-size: 42px;
          font-weight: bold;
          color: #e11e26;
          line-height: 37px;
          margin-bottom: 25px;
        }
        span:nth-child(2) {
          font-size: 21px;
          color: #7d7d7d;
          line-height: 29px;
        }
      }
    }
    .btn-box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
      margin: 48px 0 42px 0;
      .van-button {
        width: 519px;
        height: 88px;
        background: #39bbfe;
        font-size: 33px;
        font-weight: bold;
        color: #ffffff;
        border: none;
      }
    }
    .remark-box {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      padding-right: 25px;
      box-sizing: border-box;
      span:first-child {
        font-size: 27px;
        font-weight: bold;
        color: #000000;
        line-height: 44px;
        margin-bottom: 25px;
      }
      span:nth-child(2) {
        font-size: 27px;
        color: #7d7d7d;
        line-height: 40px;
      }
    }
  }
}
</style>
